<template>
  <div>
    <div id="barChart" ref="barChart" :style="{width:width,height:height}">

    </div>
  </div>
</template>

<script>
// 1.修改好图表的公共样式 根据公司统一样式  修改各种图形
// 2.设计好图形的 宽高的 父传子props
// 3. 设计 好x轴的父传子数据 自己用 this.serr.map(item=>item.xname)
// 4.设计好一些title 和一些 网格grid设置 调整图表所占大小
// 5.设计好series 数据 根据后台返回的数据格式进行 父传子
// 6. 根据后台返回的数据 用map循环整理成 series 需要的格式

export default {
  name: 'BarChart',
  props:{
    width:{
      type:String
    },
    gridData:{
      type:Object,
      default:{
        top:'3%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      }
    },
    height:{
      type:String
    },
    serData:{ //图表所需要的数据
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      
    };
  },
 watch:{
   serData:{ //监听数据的变化从新初始化图表
     handler(newVal,oldVal){
       this.makeBarChart();
     },
     deep:true
   }
 },
  mounted() {
      this.makeBarChart();
  },

  methods: {
    makeBarChart(){
      
      let mychart=this.$echarts.init(document.getElementById("barChart"));
      let option = {
          title:{
            text:this.serData.title
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            top:"10%",
            left:"10%"
          },
          grid: {
            top:this.gridData.top,
            left: this.gridData.left,
            right: this.gridData.right,
            bottom: this.gridData.bottom,
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data:this.serData.list.map(item=>item.name)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: this.serData.list.map(item=>{ //图表数据
             let   obj={
                 name:item.name,
                  data:item.data,
                 type: 'bar',
                 stack: 'Ad',
                  emphasis: {
                  focus: 'series'
                }
            }
            if(item.name=="发动机"){
                obj.markLine= {
                    lineStyle: {
                      type: 'dashed'
                    },
                    data: [[{ type: 'min' }, { type: 'max' }]]
                }
            }
            
            return obj
          })
        };
        // 
        mychart.setOption(option,true)
      
        window.addEventListener('resize',mychart.resize())
        
    }
  },
  beforeDestroy() {
    // window.removeEventListener('resize',this.$refs.barChart.__echarts__.getEchartsInstance())
  },
};
</script>
<style lang="scss" scoped>
  
</style>